<template>
  <div style="min-height:100vh;position:relative;background:#f5f5f5;" class="joinIn">
        <div style="padding:4vw;background:#ffffff">
            <p class="company" >请输入您的公司名称</p>
            <input type="text" class="companyName" v-model="name">
            <p style="margin-bottom: 15px"> 您选择第
                <select @change="money1(e)" class="type1" v-model="type">
                    <option v-for="(item,index) in data.data" :key="index" :value="item.id">{{item.id}}</option>
                </select>
                种加盟方式</p>
            <table class="table" cellspacing="0" >
                <tr>
                    <td>方式</td>
                    <td>保证金额</td>
                    <td>免费铺样衣款数</td>
                    <td>APP推广数</td>
                    <td>进货折扣</td>
                </tr>
                <tr v-for="(item,index) in data.data" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.guaranteed_amount/10000}}万元</td>
                    <td>{{item.free_sample_size}}款</td>
                    <td>{{item.extension}}人</td>
                    <td>{{item.discount*100}}%</td>
                </tr>
            </table>
            <p style="width:92vw;margin:0 auto;font-size: 12px;color:#666666;line-height: 2em">说明：1、样衣定义：每款衣服齐色单码。款式与颜色可以由乙方选择。2、进货折扣基数为纳品网平台价格。3本合同约定的所有款式，仅限定为羽绒服。</p>
        </div>

      <div style="width:92vw;margin: 0 auto">
            <mu-checkbox type="mobile" height="18px" v-model="checkbox" :label="''" :ripple="false" color="#FF4C50" style="vertical-align:middle"></mu-checkbox>

            <span style="color:#FF4C50;font-size:12px;vertical-align:middle">我已阅读并同意<router-link to="" style="color:#FF4C50">《加盟合同》</router-link></span>
      </div>
      <div class="jiameng">
          <span >￥{{money}}</span>
          <button @click="toApp">确认加盟</button>
      </div>
  </div>
</template>

<script>
  import request from '../request/index'
    export default {
        name: "joinIn",
        components: {

        },
        data(){
            return{
                data:{},
                checkbox:false,
                value1:'',
                money:'',
                type:1,
                token:'',
                name:''
            }
        },
        watch:{

        },
        updated(){

        },
        methods:{
            money1(e){
                var selectVal=document.getElementsByClassName('type1')[0].value
                this.type=selectVal;
                var that=this;
                this.data.data.forEach((v,i) => {
                    if(v.id==selectVal){
                        that.money=v.guaranteed_amount
                    }
                });

            },
            toApp(){
                var that=this;
                var data={
                    com_name:that.name,
                    id:that.type,
                    money: that.money,
                }
                if(this.value1&&this.type&&this.money){
                    if (this._globe.isAndroid) {
                        if (window.android != null && typeof window.android != "undefined") {
                        window.android.getJoinInInfo(JSON.stringify(data));;
                        } else {
                        }
                    }
                    if (this._globe.isIos) {
                        if (window.webkit) {
                        window.webkit.messageHandlers.getJoinInInfo.postMessage(that.name,that.type,that.money);
                        }
                    }
                }

            }

        },
        computed:{

        },
        created(){

        },
        mounted(){
            document.getElementsByClassName('mu-checkbox-svg-icon')[0].style.height="16px";
            document.getElementsByClassName('mu-checkbox-svg-icon')[1].style.height="16px";
            document.getElementsByClassName('mu-checkbox-icon')[0].style.height="16px";
            request.getJoinIn(this);
        }

    }
</script>

<style scoped lang="scss">
.jiameng{
    position: fixed;
    width: 100vw;
    line-height: 50px;
    bottom: 0px;
    background:#ffffff;
    height: 50px;
    span{
        padding-left: 4vw;
        display:inline-block;
        text-align: center;
        color:#FF4C50;
        font-size: 20px;
    }
    button{
        width: 30%;
        background:#FF4C50;
        float:right;
        color:#ffffff;
    }
}
.type1{
    outline: none;
    option{
        outline: none;
        width: 30px;
    }
}
    .joinIn{

        .table{
            width: 92vw;
            margin: 0 auto;
            color:#666666;
            border-collapse:collapse;
            td{
                border:1px solid #666666;
                line-height: 40px;
                font-size: 12px;
                text-align: center;
            }
        }
        .company{
            line-height: 3em;
            color: #666666;
            font-size: 14px;
        }
    }
    .companyName{
        width: 92vw;
        line-height: 45px;
        font-size: 16px;
        color:#666666;
        background: #F5F5F5;
        border: none;
        outline: none;
        text-indent: 1em;
        margin-bottom: 20px;
    }
</style>
